<!DOCTYPE html>
<html lang="zh-CN" style="background-color: #fff;">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="no-referrer" />
    <link rel="icon" href="/favicon.ico" />
    <title>大连印山官网</title>
    <link rel="stylesheet" href="./assets/style.css" />
  </head>
  <body>
    <div class="mobile-login-index">
      <div class="nut-navbar">
        <div class="nav-left">
          <div class="back"><i class="back-icon" id="back"></i></div> 
        </div> 
        <div class="nav-center">
          <h3 class="nav-title">Sign Up</h3>
        </div> 
        <div class="nav-right" style="display: none;"> 
          <div class="more"><i class="more-icon"></i></div>
        </div>
      </div>
      <div class="login-box" style="margin-bottom:120px;border-bottom: 20px solid #f5f5f5;">
        <div class="login-item">
          <div class="item-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Username
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder=" Please enter your Username" style="outline: none;">
            </form>
          </div>
          <div class="item-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Nationality
            </p>
            <form class="nut-textinput">
              <select placeholder="Please enter your nationality" style="outline: none;">
                <option value="">Please select your nationality</option>
                <option value="1">American Samoa</option>
                <option value="2">Anguilla</option>
                <option value="3">Antarctica</option>
                <option value="4">Antigua and Barbuda</option>
                <option value="5">Arab Republic of Egypt</option>
                <option value="6">Aruba</option>
              </select>
            </form>
          </div>
          <div class="item-list phone-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Phone
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder="Please enter your Username On" style="outline: none;">
            </form>
          </div>
          <div class="item-list email-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Email
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder="Please enter your Email" style="outline: none;">
            </form>
          </div>
          <div class="item-list phone2-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Phone
              <span class="title-switch switch">
                Switch Email verification
              </span>
            </p>
            <form class="nut-textinput">
              <select placeholder="Please enter your nationality" style="outline: none;">
                <option value="1">American Samoa</option>
                <option value="2">Anguilla</option>
                <option value="3">Antarctica</option>
                <option value="4">Antigua and Barbuda</option>
                <option value="5">Arab Republic of Egypt</option>
                <option value="6">Aruba</option>
              </select>
            </form>
            <form class="nut-textinput">
              <input type="text" style="border:none;" placeholder="Please enter your phone number" style="outline: none;">
              <span style="margin-left:30px; color: #409eff; font-size: 16px;">Get Code</span>
            </form>
          </div>
          <div class="item-list email2-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Email
              <span class="title-switch switch">
                Switch Phone verification
              </span>
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder="Please enter your Email" style="outline: none;">
              <span style="margin-left:30px; color: #409eff; font-size: 16px;">Get Code</span>
            </form>
            <p style="font-size: 12px;margin-top: 10px;">If you don't receive the verification code, please check if the email is in your junk folder or spam list. You can also contact our consultant to get help. Email: 
              <a href="mailto:eduprchinacom@gmail.com">eduprchinacom@gmail.com</a> 
              WeChat: eduprchina01
            </p>
          </div>
          <div class="item-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Verification code
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder="Please enter Verification code" style="outline: none;">
            </form>
          </div>
          <div class="item-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Password
            </p>
            <form class="nut-textinput">
              <input type="text" placeholder="Please enter Your Password" style="outline: none;">
            </form>
          </div>
          <div class="item-list">
            <p class="list-title">
              <span class="title-icon">*</span>
              Where did you know us?
            </p>
            <form class="nut-textinput">
              <select style="outline: none;">
                <option value="">Wechat</option>
                <option value="1">Live Stream</option>
                <option value="2">Friends & Teachers</option>
                <option value="3">Fackbook</option>
                <option value="4">Twitter</option>
                <option value="5">Youtube</option>
                <option value="6">RedNote</option>
              </select>
            </form>
          </div>
        </div>
        
      </div>
      <div class="bottom-box" style="padding: 10px 0 50px 0;">
        <label class="el-checkbox footer-checkbox is-checked">
          <span class="el-checkbox__input">
            <span class="el-checkbox__inner">
            </span>
            <input type="checkbox" aria-hidden="false" class="el-checkbox__original"
            value="">
          </span>
        </label>
        <span class="pact-text">
          I agree to the
          <span class="text-click">
            Terms of Use
          </span>
          and
          <span class="text-click">
            Privacy Policy
          </span>
          .
        </span>
        <div class="bottom-btn">Sign Up</div>
        <p class="bottom-text" style="font-size: 12px;" id="login">Already have an account? Log in here</p>
      </div>
    </div>
  </body>
  <script>
    document.getElementById('back').addEventListener('click', function () {
      window.history.go(-1)
    })
    document.getElementById('login').addEventListener('click', function () {
      window.location.href = './mobile-login.html'
    })
    document.querySelectorAll('.switch').forEach((element) => {
      element.addEventListener('click', function() {
        const isActive = document.querySelector('.login-item').classList.contains('active')
        if (!isActive) {
          document.querySelector('.login-item').classList.add('active');
        } else{
          document.querySelector('.login-item').classList.remove('active');
        }
      })
    })
  </script>